The Real Time Web with XMPP
•Download as KEY, PDF•
95 likes•14,155 views
A new real time Web is emerging, backed by the eXtensible Messaging and Presence Protocol (XMPP). This protocol is designed for low latency, real time communication, publish-subscribe, and social networking. You will learn how XMPP and HTTP can be combined to make new applications possible and how to harness XMPP from JavaScript. We will use the Strophe library to create a few simple XMPP applications. Code used in this presentation is at http://metajack.im/code/realtimeweb_jsconf2009.zip
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to The Real Time Web with XMPP
Similar to The Real Time Web with XMPP (20)
Recently uploaded
Recently uploaded (20)
The Real Time Web with XMPP
- 1. The Real Time Web with XMPP an Introduction to Strophe.js Jack Moffitt Collecta
- 3. eXtensible Messaging and Presence Protocol
- 4. Why XMPP?
- 5. HTTP APIs are great
- 7. Real time is different
- 8. XMPP basics
- 9. XMPP network
- 14. XMPP addressing
- 15. example.com
- 16. jack@example.com
- 20. XMPP protocol
- 21. XML
- 22. XML streams
- 23. XML stanzas
- 24. <message/>
- 25. <presence/>
- 26. <iq/>
- 27. <message/>
- 28. <message from=’juliet@book.lit/home’ to=’romeo@book.lit’ type=’chat’> <body> Wherefore art thou, Romeo? </body> </message>
- 29. <message from=’juliet@book.lit/home’ to=’romeo@book.lit’ type=’chat’> <body> Wherefore art thou, Romeo? </body> </message>
- 30. <message from=’juliet@book.lit/home’ to=’romeo@book.lit’ type=’chat’> <body> Wherefore art thou, Romeo? </body> </message>
- 31. <message from=’juliet@book.lit/home’ to=’romeo@book.lit’ type=’chat’> <body> Wherefore art thou, Romeo? </body> </message>
- 32. <message from=’juliet@book.lit/home’ to=’romeo@book.lit’ type=’chat’> <body> Wherefore art thou, Romeo? </body> </message>
- 33. <presence/>
- 34. <presence type=‘away’> <show>away</show> <status>At JSConf 2009</status> </presence>
- 35. <presence type=‘away’> <show>away</show> <status>At JSConf 2009</status> </presence>
- 36. <presence type=‘away’> <show>away</show> <status>At JSConf 2009</status> </presence>
- 37. <presence type=‘away’> <show>away</show> <status>At JSConf 2009</status> </presence>
- 38. <iq/>
- 39. <iq to=‘book.lit’ type=’get’ id=’disco:1’> <query xmlns=’disco#info’/> </iq>
- 40. <iq to=‘book.lit’ type=’get’ id=’disco:1’> <query xmlns=’disco#info’/> </iq>
- 41. <iq to=‘book.lit’ type=’get’ id=’disco:1’> <query xmlns=’disco#info’/> </iq>
- 42. <iq to=‘book.lit’ type=’get’ id=’disco:1’> <query xmlns=’disco#info’/> </iq>
- 43. <iq to=‘book.lit’ type=’get’ id=’disco:1’> <query xmlns=’disco#info’/> </iq>
- 44. <iq to=’romeo@book.lit/home’ from=‘book.lit’ type=’result’ id=’disco:1’> <query xmlns=’disco#info’> <identity category='server' type='im' name='ejabberd'/> <feature var='vcard-temp'/> </query> </iq>
- 45. <iq to=’romeo@book.lit/home’ from=‘book.lit’ type=’result’ id=’disco:1’> <query xmlns=’disco#info’> <identity category='server' type='im' name='ejabberd'/> <feature var='vcard-temp'/> </query> </iq>
- 46. <iq to=’romeo@book.lit/home’ from=‘book.lit’ type=’result’ id=’disco:1’> <query xmlns=’disco#info’> <identity category='server' type='im' name='ejabberd'/> <feature var='vcard-temp'/> </query> </iq>
- 47. <iq to=’romeo@book.lit/home’ from=‘book.lit’ type=’result’ id=’disco:1’> <query xmlns=’disco#info’> <identity category='server' type='im' name='ejabberd'/> <feature var='vcard-temp'/> </query> </iq>
- 48. XMPP and the Web
- 49. Sites using XMPP on the Web
- 50. BOSH Bidirectional streams Over Synchronous Http
- 51. Long polling
- 52. Normal polling Long polling
- 53. What is Strophe?
- 55. JavaScript
- 56. Real time Web applications
- 57. Fully documented
- 58. Highly optimized
- 59. Well tested
- 62. also used by Seesmic Yammer Neuros OSD
- 63. First steps
- 65. Connecting
- 66. var connection = new Strophe.Connection(URL);
- 67. connection.connect( jid, password, callback );
- 68. user@domain Strophe lets server assign resource
- 69. user@domain/resource Strophe requests a specific resource
- 70. domain or domain/resource Strophe will try SASL ANONYMOUS
- 73. connecting authenticating authentication failed connected disconnecting disconnected
- 74. function on_status(status) { if (status == Strophe.Status.CONNECTED) { // send initial presence // query for the roster } }
- 75. Sending data
- 77. Disconnecting
- 79. All about events
- 80. Event driven
- 82. Timed events
- 83. Stanza events
- 84. Examples
- 85. User clicks send button $(‘#send’).click(function () { // build message stanza // send message });
- 87. Add a handler connection.addHandler( on_message, null, “message”, “chat” );
- 88. Respond to matched stanzas function on_message(msg) { // extract message body // display text return true; }
- 89. Dealing with IQ stanzas
- 90. Answering incoming IQs connection.addHandler( on_iq_version, “jabber:iq:version”, “iq”, “get” );
- 91. Getting responses connection.addHandler( on_version, null, “iq”, null, “disco-1” );
- 92. Timed handlers connection.addTimedHandler( 100, send_flood );
- 93. Building stanzas
- 94. Strophe.Builder
- 95. Almost always returns Strophe.Builder
- 96. Allows function chaining just like jQuery
- 97. var stanza = new Strophe.Builder( “message”, {“to”: “someone@jabber.org”, “type”: “chat”} );
- 99. Adding a child c(name, attrs)
- 100. Adding text content t(“some text”)
- 101. Adding pre-made children cnode(element)
- 103. Traversing the tree up()
- 104. Examples
- 105. new Strophe.Builder( “message”, {“to”: “someone@jabber.org”, “type”: “chat”} ).c(“body”).t(“Hello, World!”);
- 106. new Strophe.Builder( “message”, {“to”: “...”, “type”: “chat”} ).c(“body”).t(“Hi”) .up() .c(“html”, {“xmlns”: “.../xhtml-im”}) .c(“body”, ...) .c(“p”).t(“Hi”)
- 109. Send available presence $pres()
- 110. Build a message $msg({“to”: “someone@jabber.org”, “type”: “chat”}) .c(“body”).t(“XMPP rocks!”)
- 111. Unchainable methods
- 112. calling stanza.toString() produces “<message to=‘someone@jabber.org’ type=‘chat’/>”
- 113. stanza.tree() produces a DOM tree
- 114. Hello, Server! an application
- 115. Plugins!
- 116. Strophe.addNamespace( ‘XHTML_IM’, ‘http://jabber.org/protocol/xhtml-im’ );
- 117. Strophe.addConnectionPlugin( ‘myplugin’, { init: function (conn) { ... } } );
- 119. The Future
- 120. XPath matching with Strophe
- 121. conn.addHandler( “/message[@from=‘you@foo.com’ and @type=‘chat’]”, function (elem) {...});
- 123. http://code.stanziq.com/strophe http://metajack.im jack@collecta.com
Editor's Notes
- types are available, unavailable, probe, error, (un)subscribe(d)
- not intended for humans, can be away, chat, xa, or dnd
- human readable string
- xml cannot be a string
- returning true keeps the handler around